<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{data.title}}</block>
		</cu-custom>
		<view class="solid-top">
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation>
				<view class="cu-item" :class="currtag==0?'text-red cur':''" @tap="LoadList(0)">
					全部
				</view>
				<view class="cu-item" :class="currtag==item.name?'text-red cur':''" v-for="(item,index) in data.tags" :key="index" @tap="LoadList(item.name)">
					{{item.name}}
				</view>
			</scroll-view>
		</view>
		<view class="padding-sm bg-white" v-if="data.list.length>0">
			<view class="flex">
				<view class="flex-sub cu-card case lessons waterfall">
					<view class="cu-item" :class="index%2==0?'':'hide'" v-for="(item, index) in data.list" :key="index">
						<view v-if="index%2==0">
							<view @click="naviTo('diary/detail',{id:item.id})" class="image radius">
								<image :src="item.cover" mode="widthFix"></image>
								<view class="cu-tag text-white">{{item.worksTime}}</view>
							</view>
							<view @click="naviTo('diary/detail',{id:item.id})" class="title lg text-cut text-bold padding-tb-xs">{{item.title}}</view>
							<view class="cu-list menu">
								<view class="cu-item">
									<view @click="naviTo('diary/detail',{id:item.id})" class="content">
										<image :src="item.cover" class="png round" mode="aspectFit"></image>
										<text class="text-gray">{{item.name}}</text>
									</view>
									<view @click="doLike(item.id,index)" class="action text-xl" :class="item.hasliked?'text-red':''">
										<text class="margin-right-xs" :class="'cuIcon-appreciate'+(item.hasliked?'fill':'')"></text>{{item.like}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-sub cu-card case lessons waterfall">
					<view class="cu-item" :class="index%2==1?'':'hide'" v-for="(item, index) in data.list" :key="index">
						<view v-if="index%2==1">
							<view @click="naviTo('diary/detail',{id:item.id})" class="image radius">
								<image :src="item.cover" mode="widthFix"></image>
								<view class="cu-tag text-white">{{item.worksTime}}</view>
							</view>
							<view @click="naviTo('diary/detail',{id:item.id})" class="title lg text-cut text-bold padding-tb-xs">{{item.title}}</view>
							<view class="cu-list menu">
								<view class="cu-item">
									<view @click="naviTo('diary/detail',{id:item.id})" class="content">
										<image :src="item.cover" class="png round" mode="aspectFit"></image>
										<text class="text-gray">{{item.name}}</text>
									</view>
									<view @click="doLike(item.id,index)" class="action text-xl" :class="item.hasliked?'text-red':''">
										<text class="margin-right-xs" :class="'cuIcon-appreciate'+(item.hasliked?'fill':'')"></text>{{item.like}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="text-center padding-top-sm" v-if="loadmore=='more'">
				<view class="loadmore">
					<image src="@/static/images/img_home_showmore.png" class="png"></image>
				</view>
			</view>
			<uni-load-more :status="loadmore" :contentText="contentText"></uni-load-more>
		</view>
		<view class="text-center text-gray" v-else>
			<text class="text-empty">空空如也，快来抢沙发吧~</text>
		</view>
		<view class="cu-bar tabbar foot noshadow">
			<view class="action">
				<button @click="naviTo('index/post')" class="cu-btn lg round margin-bottom-sm bg-orange-red shadow">发布新作品</button>
			</view>
		</view>
	</view>
</template>

<script>
	import core from "@/static/core.js"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"

	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				page: 1,
				currtag: 0,
				loadmore: 'more',
				contentText: {
					"contentdown": "加载更多数据",
					"contentrefresh": "加载中...",
					"contentnomore": "我是有底线的~"
				},
				data: {
					title: "作品欣赏",
					list: [],
					tags: []
				}
			}
		},
		onLoad() {
			// this.initData();
		},
		onShow() {
			this.initData('diary/works', {
				tag: this.currtag
			});
		},
		onPullDownRefresh() {
			this.initData('diary/works', {
				tag: this.currtag
			});
			this.page = 1;
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if (this.loadmore == 'noMore') return false;
			this.LoadList(this.page + 1);
		},
		methods: {
			/**
			 * 获取目录列表
			 */
			async infoList() {
				var that = this;
				that.data.tags = (await this.$api.reqGet({
					url: "menu/selCourseType/0",
				})).data;
			},
			
			/**
			 * 页面默认加载
			 */
			async initData(route, data = {}, callback = false) {
				this.data.like=[];
				this.infoList();
				this.LoadList(0);
				// core.get(route,function(res){
				// 	if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
				// 		return core.report(res, true);
				// 	}
				// 	that.data = res;
				// 	console.log(res)
				// 	that.loadmore = res.list.length<15 ? 'noMore' : 'more';
				// 	uni.setNavigationBarTitle({
				// 		title:res.title
				// 	});
				// 	if(callback){
				// 		callback(res);
				// 	}
				// },data);
			},
			/**
			 * 查询当前用户点赞
			 */
			async like(){
				var that=this;
				if(core.userinfo.uid!=null){
					var likeCecord=(await this.$api.reqGet({
						url: "menu/selLike/"+core.userinfo.uid,
					})).data;
					console.log(123)
					console.log(that.data.list)
					for(var i=0;i<likeCecord.length;i++){
						for(var j=0;j<that.data.list.length;j++){
							if(that.data.list[j].id==likeCecord[i].worksid){
								console.log(that.data.list[j].hasliked)
								that.data.list[j].hasliked = !(that.data.list[j].hasliked);
								console.log(that.data.list[j].hasliked)
							}
						}
					}
					console.log(likeCecord)
				}
			},
			/**
			 * 目录切换
			 */
			async LoadList(name, tag = '') {
				var that = this;
				this.currtag=name;
				that.data.list = (await this.$api.reqGet({
					url: "/menu/selWorks/" + name,
				})).data;
				console.log(that.data.list)
				if(that.data.list!=null){
					that.loadmore = that.data.list.length<15 ? 'noMore' : 'more';
					uni.setNavigationBarTitle({
							title:this.data.title
						});
					this.like();
				}else{
					that.data.list=[];
				}
				// let postvar = {
				// 	page: page
				// }
				// if (tag != '') postvar.tag = tag;
				// core.get('diary/works', function(res) {
				// 	if (typeof(res.message) != 'undefined' && typeof(res.type) != 'undefined') {
				// 		return core.report(res);
				// 	}
				// 	console.log(res)
				// 	if (page > 1) {
				// 		that.data.list = that.data.list.concat(res.list);
				// 	} else {
				// 		that.data.list = res.list;
				// 	}
				// 	that.page = page;
				// 	that.currtag = tag;
				// 	that.loadmore = res.list.length < 15 ? 'noMore' : 'more';
				// }, postvar);
			},
			naviTo(page, data = {}) {
				return core.navito(page, data);
			},
			unSupport() {
				return core.toast('敬请期待');
			},
			/**点赞方法
			 * @param {Object} id
			 * @param {Object} indexd
			 */
			async doLike(id, index) {
				alert(core.userinfo.uid)
				 if (core.userinfo.uid <= 0) return core.toast('请先登录22', 'login');
				 var that = this;
				 that.data.list[index].hasliked = !that.data.list[index].hasliked;
				 that.data.list[index].like += that.data.list[index].hasliked ? 1 : -1;
				var a= (await this.$api.reqPost({
					url:"menu/addLike",
					data:{uid:core.userinfo.uid,
						worksid:id,
						worksshow:that.data.list[index]},
				})).data;
				console.log(that.data.list[index])
				// return core.get('diary/like', function(res) {
				// 	console.log(res)
				// 	//if(res.type!='success') return core.report(res);	
					
				// }, {
				// 	id: id
				// });
			}
		}
	}
</script>

<style>
	page {
		padding-bottom: 100upx;
	}
</style>
